<template>
  <div class="root">
    <p-dialog :visible="visible" @close="$emit('close')">
      <h2>激活记录</h2>
      <el-table v-loading="loading"
                :data="records"
                border
                style="width: 100%">
        <el-table-column
          prop="activeCode"
          label="激活码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="deviceId"
          label="设备ID"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="180"
          label="创建时间">
        </el-table-column>

        <el-table-column
          prop="endDate"
          width="150"
          label="到期时间">
        </el-table-column>

        <el-table-column
          prop="action"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showActiveInfo(scope.row.id)">获取激活文件</el-button>
          </template>
        </el-table-column>
      </el-table>
    </p-dialog>
    <active-download :visible="infoVisible" @close="infoVisible=false" :id="id"></active-download>

  </div>
</template>

<script>
import api from "@/utils/api";
import ActiveDownload from "@/components/order/ActiveDownload";

export default {
  name: "ActiveRecord",
  components: {ActiveDownload},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    activeId: {
      type: Number,
      default: null
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.loadData();
      }
    }
  },
  data() {
    return {
      infoVisible: false,
      id: null,
      loading: false,
      records: []
    }
  },
  methods: {
    loadData() {
      this.loading = true;
      api.activeHistoryList(this.activeId).then(res => {
        this.records = res.records;
      }).finally(() => {
        this.loading = false;
      });
    },
    showActiveInfo(id) {
      this.id = id;
      this.infoVisible = true;

    }
  }
}
</script>

<style scoped>

</style>
